<template>
  <div>
    <div class="wrapper wrapperHome">
      <div class="fixTop">
        <div class="serachBox">
          <div class="location" @click="() => $router.push('/area')">
            <i>
              <van-icon name="location-o" />
            </i>
            <span>
              {{areaMap.areaName}}
            </span>
          </div>
          <div class="search">
            <home-search :search_backgroud="'请输入搜索关键词'"></home-search>
          </div>
        </div>
        <van-dropdown-menu>
          <van-dropdown-item :title="query.area_code ? '' : '区域'" @change="getCategoryList" v-model="query.area_code" :options="option1" />
          <van-dropdown-item :title="priceValue ? '' : '价格'" @change="changePrice" v-model="priceValue" :options="getPriceOption()" />
          <van-dropdown-item :title="query.house_type ? '' : '户型'" @change="getCategoryList" v-model="query.house_type" :options="this.type === 1 ? option3 : option3Other" />
        </van-dropdown-menu>
      </div>

      <div class="list-component">
        <van-list
          v-model="loading"
          :finished="!needLoading"
          finished-text=""
          @load="load"
        >
          <list-view ref="listView" :listData="goods_list"></list-view>
        </van-list>
      </div>
      <!-- <mu-container ref="container" class="loadmore-content" style="overflow: hidden">
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <div class="listBox" ref="goodsListBox">
            <list-view ref="listView" :listData="goods_list" @load="load"></list-view>
          </div>
        </mu-load-more>
      </mu-container> -->
    </div>
  </div>
</template>

<script>
import { HomeSearch, CategoryNav } from '@/views/home/components'
import ListView from '@/components/listview/listview'
import { summaryMixin } from '@/base/mixins/tableMix'
import { mineApi } from '@/api'
import { mapGetters } from 'vuex'
export default {
  components: {
    HomeSearch,
    CategoryNav,
    ListView
  },
  mixins: [summaryMixin],
  async created() {
    this.getCategoryList()
    const res = await mineApi.getArea({
      id: this.areaMap.code
    })
    this.areaList = res.data
    console.log('this.areaList', this.areaList)
    this.areaList.forEach(item => {
      this.option1.push({
        text: item.areaName,
        value: item.code
      })
    })
  },
  computed: {
    ...mapGetters([
      'areaMap',
      'token'
    ])
  },
  data() {
    return {
      navData: [],
      cid: '',
      type: 1,
      priceValue: '',
      goods_list: [],
      areaList: [],
      query: {
        type: null,
        house_type: '',
        area_code: '',
        total_price_max: ''
      },
      option1: [
        { text: '不限', value: '' }
      ],
      optionNew: [
        { text: '不限', value: '' }
      ],
      optionSecond: [
        { text: '不限', value: '' },
        { text: '100万以下', value: '1', total_price_max: '100', total_price_min: '0' },
        { text: '100-150万', value: '2', total_price_max: '150', total_price_min: '100' },
        { text: '150-200万', value: '3', total_price_max: '200', total_price_min: '150' },
        { text: '200-300万', value: '4', total_price_max: '300', total_price_min: '200' },
        { text: '300-500万', value: '5', total_price_max: '500', total_price_min: '300' },
        { text: '500-1000万', value: '6', total_price_max: '1000', total_price_min: '500' }
      ],
      optionRent: [
        { text: '不限', value: '' },
        { text: '500-1000', value: '1', unit_price_max: '1000', unit_price_min: '500' },
        { text: '1000-1500', value: '2', unit_price_max: '1500', unit_price_min: '1000' },
        { text: '1500-2000', value: '3', unit_price_max: '2000', unit_price_min: '1500' },
        { text: '2000-3000', value: '4', unit_price_max: '3000', unit_price_min: '2000' },
        { text: '3000-4000', value: '5', unit_price_max: '4000', unit_price_min: '3000' },
        { text: '4000-5000', value: '6', unit_price_max: '5000', unit_price_min: '4000' },
        { text: '5000以上', value: '7', unit_price_max: '1000000', unit_price_min: '5000' }
      ],
      option3: [
        { text: '不限', value: '' },
        { text: '住宅', value: '2' },
        { text: '别墅', value: '3' },
        { text: '公寓', value: '4' },
        { text: '商铺', value: '5' },
        { text: '写字楼', value: '6' },
        { text: '酒店', value: '7' },
        { text: '厂房', value: '8' }
      ],
      option3Other: [
        { text: '不限', value: '' },
        { text: '一居', value: '1' },
        { text: '二居', value: '2' },
        { text: '三居', value: '3' },
        { text: '四居', value: '4' },
        { text: '五居', value: '5' },
        { text: '五居以上', value: '6' }
      ],
      option3Rent2: [
        { text: '出租类型', value: '' },
        { text: '不限', value: '1' },
        { text: '整租', value: '1' },
        { text: '合租', value: '1' }
      ]
    }
  },
  methods: {
    navchange(id) {
      this.cid = id
    },
    getPriceOption() {
      if (this.$route.name === 'newHouse') {
        return this.optionNew
      }
      if (this.$route.name === 'secondHand') {
        return this.optionSecond
      }
      if (this.$route.name === 'rentHouse') {
        return this.optionRent
      }
      return this.option1
    },
    changePrice(value) {
      if (this.type === 2) {
        this.query.total_price_min = Number(this.optionSecond[value].total_price_min)
        this.query.total_price_max = Number(this.optionSecond[value].total_price_max)
      }
      if (this.type === 3) {
        this.query.unit_price_min = Number(this.optionRent[value].unit_price_min)
        this.query.unit_price_max = Number(this.optionRent[value].unit_price_max)
      }
      this.getCategoryList()
    },
    async getCategoryList() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '加载中'
      })
      this.limit = 10
      this.page = 1
      if (this.$route.name === 'newHouse') {
        this.type = 1
      } else if (this.$route.name === 'secondHand') {
        this.type = 2
      } else if (this.$route.name === 'rentHouse') {
        this.type = 3
      }
      this.query.type = this.type
      this.query.cityCode = this.areaMap.code
      const res = await mineApi.getCategory({
        pageSize: this.limit,
        pageNo: this.page,
        ...this.query
      })
      this.goods_list = res.data.records
      this.$toast.clear()
    },
    async  _getDataList(data) {
      const res = await mineApi.getCategory({
        pageSize: this.limit,
        pageNo: this.page,
        ...this.query
      })
      if (!res.data) {
        res.data = []
        return []
      }
      this.goods_list = this.goods_list.concat(res.data.records)
      this.needLoading = !(this.limit > this.goods_list.length)
      return res.data.records
    }
  },
  watch: {
    $route(from, to) {
      this.getCategoryList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
.wrapper {
  font-size: 16px;
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
  .van-dropdown-menu{
    .van-ellipsis{
      overflow: auto;
    }
  }
  .serachBox{
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 5px 5px;
    justify-content: space-between;
    .location{
      font-size: 16px;
      flex: 1;
      display: flex;
      align-items: center;
      i{
        margin-right: 2px;
      }
    }
    .search{
      flex: 3;
    }
  }
  .loadmore-content{
    padding: 0;
    margin: 0;
    margin-top: 40px;
    .listBox{
      background-color: #fff;
    }
  }
    .list-component{
      background-color: #fff;
      padding: 10px;

    }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.wrapperHome{
  padding-top: 100px;
  .fixTop{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    background-color: #fff;
  }
  .van-ellipsis{
    overflow: auto;
  }
}
</style>
